<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>html5数据源</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
    <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"></link>
</head>
<body>
<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
            <th>Performance</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Airi Satou</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>33</td>
            <td data-search="2008年11月28日 2008/11/28" data-order="1">2008/11/28</td>
            <td>$162,700</td>
            <td data-order="3">Good</td>
        </tr>
        <tr>
            <td>Sonya Frost</td>
            <td>Software Engineer</td>
            <td>Edinburgh</td>
            <td>23</td>
            <td data-search="2008年12月13日 2008/12/13" data-order="2">2008/12/13</td>
            <td>$103,600</td>
            <td data-order="4">Bad</td>
        </tr>
        <tr>
            <td>Ashton Cox</td>
            <td>Junior Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td data-search="2009年1月12日 2009/01/12" data-order="3">2009/01/12</td>
            <td>$86,000</td>
            <td data-order="2">Better</td>
        </tr>
        <tr>
            <td>Colleen Hurst</td>
            <td>Javascript Developer</td>
            <td>San Francisco</td>
            <td>39</td>
            <td data-search="2009年9月15日 2009/09/15" data-order="4">2009/09/15</td>
            <td>$205,500</td>
            <td data-order="1">Best</td>
        </tr>
        <tr>
            <td>Rhona Davidson</td>
            <td>Integration Specialist</td>
            <td>Tokyo</td>
            <td>55</td>
            <td data-search="2010年10月14日 2010/10/14" data-order="5">2010/10/14</td>
            <td>$327,900</td>
            <td data-order="5">Worst</td>
        </tr>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td data-search="2011年4月25日 2011/04/25" data-order="6">2011/04/25</td>
            <td>$320,800</td>
            <td data-order="3">Good</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
            <td>Tokyo</td>
            <td>63</td>
            <td data-search="2011年7月25日 2011/07/25" data-order="7">2011/07/25</td>
            <td>$170,750</td>
            <td data-order="3">Good</td>
        </tr>
        
        <tr>
            <td>Cedric Kelly</td>
            <td>Senior Javascript Developer</td>
            <td>Edinburgh</td>
            <td>22</td>
            <td data-search="2012年3月29日 2012/03/29" data-order="8">2012/03/29</td>
            <td>$433,060</td>
            <td data-order="2">Better</td>
        </tr>
        <tr>
            <td>Herrod Chandler</td>
            <td>Sales Assistant</td>
            <td>San Francisco</td>
            <td>59</td>
            <td data-search="2012年8月6日 2012/08/06" data-order="9">2012/08/06</td>
            <td>$137,500</td>
            <td data-order="4">Bad</td>
        </tr>
        <tr>
            <td>Brielle Williamson</td>
            <td>Integration Specialist</td>
            <td>New York</td>
            <td>61</td>
            <td data-search="2012年12月2日 2012/12/02" data-order="10">2012/12/02</td>
            <td>$372,000</td>
            <td data-order="4">Bad</td>
        </tr>
    </tbody>
</table>

<script>
    $(document).ready(function () {
        $('#example').DataTable();
    });
</script>
</body>
</html>